/* eslint-disable jsx-a11y/anchor-is-valid */
import { useState } from "react";
import { useNavigate } from "react-router";
import { NavLink } from 'react-router-dom'
import axios from 'axios'
import './login.scss'
export default function Login() {
    let navigate = useNavigate();
    let [uname, setUname] = usestate('');
    let [red, setRed] = usestate(false);
    let [blue, setblue] = usestate(false);
    let [password, setPassword] = usestate('');
    let [unameBool, setUnameBool] = usestate(false);

    // uname的Input事件
    function unameChange(e) {
        uanme = e.target.value;
        setUname(uanme)
    }
    // uname聚焦事件
    function unameFocus() {
        // 边框蓝色
        setblue(true)
        setred(false)
    }
    // uname 框的失焦事件
    function UnameBorder() {
        //  验证 不符合规则 就变红框
        let regUname = /^[a-zA-Z]\w{5,19}$/;
        setUnameBool(regUname.test(uname));// 不成功 fasle
        setblue(false)
        // 符合条件
        if (/^([a-z]|[A-Z])([a-z]|[A-Z]|[0-9]){5,19}$/.test(uname)) {
            setred(false)
            setspan1(false)
            setspan2(false)
        }
        // 不和条件
        if (!/^([a-z]|[A-Z])([a-z]|[A-Z]|[0-9]){5,19}$/.test(uname)) {
            setred(true)
            setspan1(false)
            setspan2(true)
        }
        if (uname == '') {
            setred(true)
            setspan1(true)
            setspan2(false)
        }
    }
    function passwordChange(e) {
        setPassword(e.target.value)
    }
    // 密码框聚焦事件
    function passwordFocus() {
        setblue2(true)
        setred2(false)
    }
    // 密码框失焦事件
    function passwordBlur() {
        setblue2(false)
        // 符合条件
        if (/^(\w|\d){6,24}$/.test(Password)) {
            setred2(false)
            setspan3(false)
            setspan4(false)
        }
        // 不和条件
        if (!/^(\w|\d){6,24}$/.test(Password)) {
            setred2(true)
            setspan3(false)
            setspan4(true)
        }
        if (Password == '') {
            setred2(true)
            setspan3(true)
            setspan4(false)
        }
    }
    function login() {
        if (/^([a-z]|[A-Z])([a-z]|[A-Z]|[0-9]){4,19}$/.test(uname) && /^(\w|\d){6,24}$/.test(Password)) {
            axios.post('https://apipc-xiaotuxian-front.itheima.net/login', { account: uname, password: Password }).then(res => {
                if (res.data.msg == '操作成功') {

                    localStorage.setItem('userInfor', JSON.stringify(res.data.result))
                    navigate("/")
                }
            })
                .catch(res => {
                    alert(res.response.data.message);
                })
        }
    }
    return (
        <div id="LoginWrap">
            <header>
                <div className="container">
                    <h1><a href="">小兔鲜</a></h1>
                    <h3>欢迎登陆</h3>
                    <NavLink to="/"> 进入网站首页 </NavLink>
                </div>
            </header>
            <section>
                <div className="loginwrap">
                    <nav>
                        <a href=""> 账户登录</a>
                        <a href=""> 扫码登陆</a>
                    </nav>
                    <div className="account">
                        <div className="toggle">
                            <a href="">使用短信登录</a>
                        </div>
                        <form>
                            <div className="form_item">
                                <div className="inp">
                                    <i></i>
                                    <input type="text" placeholder="请输入用户名" value={uname}
                                        className={`${!unameBool ? 'red_border' : ''} ${blue ? 'blue_border' : ''}`}
                                        onInput={unameChange}
                                        onFocus={unameFocus}
                                        onBlur={UnameBorder} />
                                </div>
                                <div className="error">
                                    {/*  */}
                                    {uname == '' && !unameBool && <span >请输入用户名</span>}
                                    {!unameBool && uanme != '' && <span >字母开头且6-20个字符</span>}
                                </div>
                            </div>
                            <div className="form_item">
                                <div className="inp">
                                    <i></i>
                                    <input type="password" placeholder="请输入密码" value={Password} className={`${red2 ? 'red_border' : ''} ${blue2 ? 'blue_border' : ''}`} onChange={passwordChange}
                                        onFocus={passwordFocus} onBlur={passwordBlur} />
                                </div>
                                <div className="error">
                                    {/* {span3 && <span>请输入密码</span>}
                                    {span4 && <span>密码6-24个字符</span>} */}
                                </div>
                            </div>
                            <div className="form_item">
                                <div className="agree">
                                    <input type="checkbox" checked={inp} onChange={setinp(!inp)} />
                                    <span>我已同意</span>
                                    <a href="">《隐私条款》</a>
                                    <span>和</span>
                                    <a href="">《服务条款》</a>
                                </div>
                                {!inp && <div className="error"> 请勾选登录协议</div>}

                            </div>
                            <button className="btn" onClick={login}>登录</button>
                        </form>
                        <div className="action">
                            <a href="">
                                <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="" />
                            </a>
                            <div>
                                <a href="">忘记密码</a>
                                <a href="">免费注册</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    )
}